.banner-com {
  width: 100%;
  height: 800px;
  padding: 180px 0 100px 0;
  background-image: url("/img/banner-bg.png");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;

  .show-box {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: flex-end;

    .font-box {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 48px;
      z-index: $level3;

      .type-com {
        font-size: 65px;
      }

      .title {
        font-weight: 700;
        letter-spacing: 0.8px;
        padding: 8px 10px;
        background: linear-gradient(90.21deg, rgba(170, 54, 124, 0.5) -5.91%, rgba(74, 47, 189, 0.5) 111.58%);
        border: 1px solid rgba(255, 255, 255, 0.5);
        font-size: 20px;
        margin-bottom: 16px;
        display: inline-block;
      }

      .intro {
        color: #b8b8b8;
        font-size: 18px;
        letter-spacing: 0.8px;
        line-height: 1.5em;
        width: 96%;
        margin-top: 16px;
      }

      .connect {
        display: flex;
        align-items: center;
        margin-top: 60px;
        cursor: pointer;

        p {
          color: #fff;
          font-weight: 700;
          font-size: 20px;
          letter-spacing: 0.8px;
        }

        img {
          width: 34px;
          height: 34px;
          margin-left: 12px;
          transition: margin 0.3s ease-in-out;
        }
      }
      .connect:hover {
        img {
          margin-left: 24px;
        }
      }
    }

    .head-img {
      animation: updown 3s linear infinite;
      z-index: $level4;
      width: 90%;
    }

    .active {
      animation: updown 3s linear infinite, scale 0.8s ease-in-out 1;
    }

    @keyframes updown {
      0% {
        transform: translateY(-20px);
      }
      50% {
        transform: translateY(20px);
      }
      100% {
        transform: translateY(-20px);
      }
    }
    @keyframes scale {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  }
}

@media screen and (max-width: 431px) {
  .banner-com {
    padding: 100px 0 0 0;
    height: 700px;

    .show-box {
      .font-box {
        padding: 0 24px;
        width: 100%;
        .type-com {
          font-size: 36px;
        }
      }
      .title {
        white-space: nowrap;
      }
    }

    .head-img {
      width: 70%;
      height: 70%;
      margin-top: 195px;
      margin-left: 100px;
    }
  }
}
@media screen and (max-width: 751px) and (min-width: 432px) {
  .banner-com {
    .head-img {
      object-fit: cover;
      width: 70%;
      margin-left: 160px;
      margin-top: 180px;
    }
    .show-box {
      .font-box {
        width: 100%;
        .type-com {
          font-size: 48px;
        }
      }
    }
  }
}
@media screen and (min-width: 752px) {
  .banner-com {
    .show-box {
      .font-box {
        width: 600px;
      }
    }
  }
}
